<template>
	<view class="page">
		
		<view class="panel-user">
			<!-- 已登录 -->
			<view v-if="user" class="login" @click.stop="$go('/pages/my/my-setting')">
				<image v-if="user.userInfo.headImage" :src="user.userInfo.headImage"></image>
				<image v-else :src="$getImgPath('sNlOzAdvLRZV9c2f0ee8a3c7c9638a54940382568c9d_1681910699254.png')" />
				<view class="user-info">
					<view class="user-nickname">{{ user.userInfo.nickName }}</view>
					<view class="user-phone">{{ user.userInfo.phone | _maskPhone }}</view>
				</view>
				<view class="arrow xzfx_icon_arrow_right"></view>
			</view>
			<!-- <view v-if="user" class="user-authentication">
				<view class="user-authentication-item">
					<view class="label">实名认证:</view>
					<view v-if="user.userInfo.realStatus === 0" class="item" style="color: #999;" @click.stop="$go('/pages/authentication/user?type=user')">未认证，去认证</view>
					<view v-if="user.userInfo.realStatus === 1" class="item" style="color: #4cd964;">已认证</view>
				</view>
				<view class="user-authentication-item">
					<view class="label">车主认证:</view>
					<view v-if="user.userInfo.truckAuthStatus === 0" class="item" style="color: #999;" @click.stop="$go('/pages/authentication/user?type=carOwner')">未认证，去认证</view>
					<view v-if="user.userInfo.truckAuthStatus === 1" class="item" style="color: #4cd964;">已认证</view>
					<view v-if="user.userInfo.truckAuthStatus === 2" class="item" style="color: #dd524d;" @click.stop="$go('/pages/authentication/car-owner?delta=1')">未通过，重新认证</view>
					<view v-if="user.userInfo.truckAuthStatus === 3" class="item" style="color: #f0ad4e;">平台审核中</view>
				</view>
			</view> -->
			<!-- 未登录 -->
			<view v-else class="login" @click.stop="$checkLogin">
				<image :src="$getImgPath('sNlOzAdvLRZV9c2f0ee8a3c7c9638a54940382568c9d_1681910699254.png')" />
				<view class="action">未登录，点击登录</view>
			</view>
		</view>
		
		<view class="panel-authentication" :class="activeClass">
			<view class="panel-authentication-item" @click.stop="activeClass = 'active2'">
				<view class="panel-authentication-info">
					<view class="panel-authentication-item-title">实名认证</view>
					<view v-if="user.userInfo.realStatus === 0" class="panel-authentication-item-tip" style="color: #999;">未认证，认证通过后可发布货源</view>
					<view v-if="user.userInfo.realStatus === 1" class="panel-authentication-item-tip" style="color: #4cd964;">已认证</view>
				</view>
				<view v-if="user.userInfo.realStatus === 0" class="panel-authentication-btn" @click.stop="$go('/pages/authentication/user?type=user')">立即认证</view>
				<view v-if="user.userInfo.realStatus === 1" class="panel-authentication-btn" @click.stop="$go('/pages/authentication/user-details')">查看详情</view>
			</view>
			<view class="panel-authentication-item" @click.stop="activeClass = 'active1'">
				<view class="panel-authentication-info">
					<view class="panel-authentication-item-title">车主认证</view>
					<view v-if="user.userInfo.truckAuthStatus === 0" class="panel-authentication-item-tip" style="color: #999;">未认证，认证通过后可接单</view>
					<view v-if="user.userInfo.truckAuthStatus === 1" class="panel-authentication-item-tip" style="color: #4cd964;">已认证</view>
					<view v-if="user.userInfo.truckAuthStatus === 2" class="panel-authentication-item-tip" style="color: #dd524d;">
						未通过，{{ user.userInfo.truckAuthReason }}
					</view>
					<view v-if="user.userInfo.truckAuthStatus === 3" class="panel-authentication-item-tip" style="color: #f0ad4e;">平台审核中</view>
				</view>
				<view v-if="user.userInfo.truckAuthStatus === 0" class="panel-authentication-btn" @click.stop="toAuthentication">立即认证</view>
				<view v-if="user.userInfo.truckAuthStatus === 2" class="panel-authentication-btn" @click.stop="$go('/pages/authentication/car-owner?delta=1')">重新认证</view>
				<view v-if="user.userInfo.truckAuthStatus === 1 || user.userInfo.truckAuthStatus === 3" class="panel-authentication-btn" @click.stop="$go('/pages/authentication/car-owner-details')">查看详情</view>
			</view>
		</view>
		
		<view class="panel-box">
			<view v-if="token" class="panel-income">
				<view class="panel-income-card">
					<view class="card-top">
						<view class="left">
							<view class="label">可提现金额(元)</view>
							<view class="value">{{ user.daiTx }}</view>
						</view>
						<view class="btn" @click.stop="$go('/pages/my/my-withdrawal?type=wait')">提 现</view>
					</view>
					<view class="card-bottom">
						<view class="item">
							<view class="label">已提现金额(元)</view>
							<view class="value">{{ user.yiTx }}</view>
						</view>
						<view class="item">
							<view class="label">未结算金额(元)</view>
							<view class="value">{{ user.daiJs }}</view>
						</view>
					</view>
				</view>
				<view class="panel-income-btns">
					<view class="item" @click.stop="$go('/pages/my/my-withdrawal?type=unsettled')">
						<text class="xzfx_icon_order-incomplete"></text>未结算
					</view>
					<view class="line"></view>
					<view class="item" @click.stop="$go('/pages/my/my-withdrawal?type=history')">
						<text class="xzfx_icon_tixianjilu"></text>提现记录
					</view>
				</view>
			</view>
			
			<view class="panel-menu">
				<view class="item" v-for="(item,index) in list" :key="index" @click.stop="selectMenuFn(item)">
					<view class="menu-info">
						<image :src="$getImgPath(item.icon)" />
						<view>{{ item.name }}</view>
					</view>
					<view class="xzfx_icon_arrow_right"></view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeClass: "active2",
				menuButtonInfo: uni.getMenuButtonBoundingClientRect(),
				user: null,
				token: null,
				path: "",
				list: [
					{
						icon: "oU9MSDOPdw7I101e3477706ea13e59f58334027b67cc_1681802621747.png",
						name: "我的卖车",
						pageUrl: "/pages/my/my-car-sale"
					},
					{
						icon: "QomQDxhtsV58aaa2dc6ea42ac70b1f59ed6a270ed1a0_1681802593128.png",
						name: "我的置换",
						pageUrl: "/pages/my/my-car-replace"
					},
					{
						icon: "n6lt0GpqRolZ2c4561a30f17df841d7e1a7e1b2fc167_1681802836600.png",
						name: "我的求购",
						pageUrl: "/pages/my/my-want-buy"
					},
					{
						icon: "adzJKOHZqLJp9a1a918125f5ce69aeb54a9d312fc422_1682155512329.png",
						name: "我的估价",
						pageUrl: "/pages/my/my-evaluate"
					},
					{
						icon: "QPQhREXBDbyL699ae89d272b84736ca0682e5073c97e_1681802570902.png",
						name: "我的收藏",
						pageUrl: "/pages/my/my-collect"
					}
				]
			}
		},
		onShow() {
			this.token = uni.getStorageSync("token") || null;
			this.getUserInfo();
		},
		onPullDownRefresh(){
			this.token = uni.getStorageSync("token") || null;
			this.getUserInfo();
		},
		methods: {
			toAuthentication(){
				if(this.user.userInfo.realStatus === 0){
					this.$go('/pages/authentication/user?type=carOwner')
				}
				if(this.user.userInfo.realStatus === 1){
					this.$go('/pages/authentication/car-owner?delta=1');
				}
			},
			getUserInfo(){
				if(this.token){
					this.$utils.system.loading("加载中，请稍后");
					this.$apis.user.getInfo().then(res => {
						this.user = res;
						uni.setStorageSync("userInfo", res);
					}).catch(err => {
						console.log(err);
						this.user = null;
					}).finally(() => {
						uni.hideLoading();
						uni.stopPullDownRefresh();
					});
				}
			},
			loginOut(){
				uni.removeStorageSync("token")
				this.token = ""
			},
			selectMenuFn(item){
				this.path = item.pageUrl;
				this.$checkLogin(this.toPage)
			},
			toPage(){
				this.$go(this.path)
			}
		}
	}
</script>

<style lang="scss" scoped>

	.panel-user{
		color: #333333;
		padding: 30rpx 30rpx 0rpx 30rpx;
		.login{
			display: flex;
			justify-content: space-between;
			align-items: center;
			image{
				width: 62px;
				height: 62px;
				display: block;
				border-radius: 50%;
			}
			.user-info{
				width: calc(100% - 67px);
				.user-nickname{
					font-size: 38rpx;
					padding: 0 20rpx;
					line-height: 50rpx;
					font-weight: bold;
				}
				.user-phone{
					margin-top: 10rpx;
					font-size: 30rpx;
					padding: 0 20rpx;
					line-height: 40rpx;
				}
			}
			.arrow{
				font-size: 28rpx;
			}
			.action{
				width: calc(100% - 67px);
				font-size: 40rpx;
				font-weight: 500;
			}
		}
		.user-authentication{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 25rpx;
			.user-authentication-item{
				width: calc(50% - 10rpx);
				height: 60rpx;
				display: flex;
				// justify-content: center;
				align-items: center;
				border-radius: 30rpx;
				background-color: rgba(245, 109, 157, 0.1);
				padding: 0 20rpx;
				.label{
					display: inline-flex;
					font-size: 26rpx;
					padding-right: 10rpx;
					color: #666;
				}
				.item{
					display: inline-flex;
					justify-content: center;
					align-items: center;
					font-size: 26rpx;
				}
			}
		}
	}
	.panel-authentication{
		.panel-authentication-item{
			position: absolute;
			left: 25rpx;
			width: calc(100% - 50rpx);
			height: 200rpx;
			display: flex;
			justify-content: space-between;
			background-color: #000;
			// background-color: #e88f21;
			padding: 20rpx 25rpx;
			border-radius: 25rpx;
			transition: 0.5s;
			background-image: url(../../static/card_bg.png);
			background-size: 100% 85%;
			.panel-authentication-info{
				.panel-authentication-item-title{
					font-size: 36rpx;
					font-weight: bold;
				}
				.panel-authentication-item-tip{
					font-size: 26rpx;
				}
			}
			.panel-authentication-btn{
				display: flex;
				justify-content: center;
				align-items: center;
				width: 200rpx;
				height: 60rpx;
				background-color: $xzfx-theme;
				color: #fff;
				border-radius: 30rpx;
				margin-top: 15rpx;
				font-size: 28rpx;
			}
		}
	}
	.active1{
		.panel-authentication-item:first-child{
			opacity: 0.5;
			top: 180rpx;
			z-index: 1;
			.panel-authentication-btn{
				display: none;
				opacity: 0;
				transition-delay: 0s;
			}
			.panel-authentication-info{
				color: #e4e4e4;
			}
		}
		.panel-authentication-item:last-child{
			top: 253rpx;
			opacity: 1;
			z-index: 2;
			.panel-authentication-btn{
				display: flex;
				opacity: 1;
				transition-delay: 0.3s;
			}
			.panel-authentication-info{
				color: #ffffff;
			}
		}
	}
	.active2{
		.panel-authentication-item:first-child{
			opacity: 1;
			top: 253rpx;
			z-index: 2;
			.panel-authentication-btn{
				display: flex;
				opacity: 1;
				transition-delay: 0.3s;
			}
			.panel-authentication-info{
				color: #ffffff;
			}
		}
		.panel-authentication-item:last-child{
			top: 180rpx;
			opacity: 0.5;
			z-index: 1;
			.panel-authentication-btn{
				display: none;
				opacity: 0;
				transition-delay: 0s;
			}
			.panel-authentication-info{
				color: #e4e4e4;
			}
		}
	}
	.panel-box{
		background-color: #fff;
		// padding: 30rpx 0;
		position: absolute;
		top: 370rpx;
		left: 0;
		z-index: 3;
		width: 100%;
		min-height: calc(100vh - 370rpx);
		.panel-income{
			background-color: rgba(245, 109, 157, 0.1);
			margin: $xzfx-spacing;
			border-radius: 20rpx;
			overflow: hidden;
			color: #FFFFFF;
			.panel-income-card{
				background-color: $xzfx-theme;
				padding: 25rpx 25rpx 20rpx 25rpx;
				border-radius: 20rpx;
				.card-top{
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding-bottom: 15rpx;
					border-bottom: 1rpx solid #F1F1F1;
					.left{
						.label{
							font-size: 30rpx;
						}
						.value{
							font-weight: bold;
							font-size: 58rpx;
						}
					}
					.btn{
						height: 70rpx;
						border-radius: 35rpx;
						padding: 0 40rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						background-color: rgba(245, 109, 157, 0.1);
						background-color: #ffe7d7;
						color: $xzfx-theme;
					}
				}
				.card-bottom{
					padding-top: 20rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.item{
						width: 50%;
						.label{
							font-size: 30rpx;
						}
						.value{
							font-size: 42rpx;
						}
					}
				}
			}
			.panel-income-btns{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 15rpx 0;
				.item{
					padding: 10rpx 0;
					width: calc(100% / 2);
					display: flex;
					justify-content: center;
					align-items: center;
					color: $xzfx-theme;
					font-size: 32rpx;
					text{
						font-size: 36rpx;
						margin-right: 5rpx;
					}
				}
				.line{
					width: 1rpx;
					height: 30rpx;
					background-color: #e4e4e4;
				}
			}
		}
		.panel-menu {
			border-radius: 20rpx;
			overflow: hidden;
			margin: $xzfx-spacing;
			background-color: #FFFFFF;
		
			.item {
				height: 100rpx;
				padding: 0 25rpx;
				border-top: 1rpx solid #F1F1F1;
				display: flex;
				justify-content: space-between;
				align-items: center;
		
				.menu-info {
					width: calc(100% - 50rpx);
					display: flex;
					align-items: center;
					image {
						width: 42rpx;
						height: 42rpx;
					}
					view {
						width: calc(100% - 40rpx);
						font-size: 32rpx;
						margin-left: 15rpx;
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
						color: #333333;
					}
				}
				.xzfx_icon_arrow_right{
					color: #666;
				}
			}
			.item:nth-child(1){
				border-top: 0;
			}
		}
	}
</style>
